<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>场景选择</title>
    <link rel="stylesheet" href="{{asset('css/select.css')}}">
    <!-- Link Swiper's CSS -->
    <!-- <link rel="stylesheet" href="./swiper_source/swiper-bundle.min.css"> -->
    <link rel="stylesheet" href={{asset('css/swiper-bundle.min.css')}}>
    <link rel="stylesheet" href={{asset('iconfont/iconfont.css')}}>
    <style>
        body {
            background-image: url("./images/1920bg.jpg");
        }

        .title {
            color: white;
        }
    </style>
</head>

<body>
    <div class="content-container">
        <!-- 弹性盒子 -->
        <header>
            <h2 class="title">场景选择</h2>
            <div class="col-blank"></div>
            <div class="horizontal-tip-container">
                <img src={{asset('images/horizontal_tip.png')}} alt="">
            </div>
        </header>
        <!-- 轮播图 Swiper -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide swiper-slide-content">
                    <div class="open-container">
                        <img class="swiper-imgs" src={{asset('images/01.jpg')}} alt="">
                        <p class="swiper-desc">展览馆名称</p>
                        <!-- 骑行中提示 -->
                        <div class="riding-tips-container">
                            <i class="iconfont icon-loading"></i>
                            <p class="riding-tips">骑行中</p>
                            <div class="sign-out-container">
                                <img class="sign_out_btn" src={{asset('images/sign_out.png')}} alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide swiper-slide-content">
                    <div class="open-container">
                        <img class="swiper-imgs" src={{asset('images/01.jpg')}} alt="">
                        <p class="swiper-desc">展览馆名称</p>
                        <!-- 骑行中内容 -->
                        <div class="riding-tips-container">
                            <i class="iconfont icon-loading"></i>
                            <p class="riding-tips">骑行中</p>
                            <div class="sign-out-container">
                                <!-- 退出图片 -->
                                <img class="sign_out_btn" src={{asset('images/sign_out.png')}} alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 展示未开放 -->
                <div class="swiper-slide">
                    <div class="notopen-container">
                        <img src={{asset('images/next.jpg')}} alt="">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="notopen-container">
                        <img src={{asset('images/next.jpg')}} alt="">
                    </div>
                </div>
                <!-- <div class="swiper-slide">Slide 5</div>
                <div class="swiper-slide">Slide 6</div>
                <div class="swiper-slide">Slide 7</div>
                <div class="swiper-slide">Slide 8</div>
                <div class="swiper-slide">Slide 9</div>
                <div class="swiper-slide">Slide 10</div> -->
            </div>
            <!-- Add Pagination -->
            <!-- <div class="swiper-pagination"></div> -->

        </div>

        <!-- <footer>11</footer> -->
    </div>
    <!-- 左右箭头 -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <!-- 切换按钮显示的遮罩层 -->
    <div class="mask-container">
        <div class="mask-content-container">
            <div>
                <img src={{asset('images/interrupt.png')}} alt="" class="interrupt-img">
            </div>
            <div>确定更换场景吗？</div>
            <div>
                <img class="confirm-img" src={{asset('images/confirm.png')}} alt="">
                <img class="cancel-img" src={{asset('images/cancel.png')}} alt="">
            </div>
        </div>
    </div>
    <!-- 确定退出的按钮 -->
    <div class="quit-mask-container">
        <div class="mask-content-container">
            <div>
                <img src={{asset('images/interrupt.png')}} alt="" class="interrupt-img">
            </div>
            <div>确定退出场景吗？</div>
            <div>
                <img class="confirm-quit-img" src={{asset('images/confirm.png')}} alt="">
                <img class="cancel-img" src={{asset('images/cancel.png')}} alt="">
            </div>
        </div>
    </div>
    <button class="testBtn">发出请求</button>
</body>
<script src={{asset('js/swiper-bundle.min.js')}}></script>
<script src="{{asset('js/jquery.min.js')}}"></script>
<script>
    // 扫码进入场景的设备的SID
    var sid =@json($sid);
    console.log(sid,'sid');
    // 确认弹出层自定下标
    var confirm_index = 0;
    // 当前的场景 -1表示不存在
    var activeView = -1;
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')    //携带csrf_token，否则会返回错误500
        }
    });

    (function () {
        var swiper = new Swiper('.swiper-container', {
            slidesPerView: 4,
            spaceBetween: 15,
            //   循环模式
            loop: false,
            //   底部分页
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            //   左右按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
        //判断横竖屏
        $(window).resize(() => {
            let w = $("body").width();
            let h = $("body").height();
            // console.log(w);
            // console.log(h);
            if (w > h) {
                // 横屏
                console.log('heng');
                // $('header').css('flex-grow',0)
                $('.swiper-container').css('flex-grow', 2)
                $('header').css('display', 'block')
                $('.col-blank').css('display', 'block')
                $('.horizontal-tip-container').css('display', 'none')
            } else {
                // alert("竖屏");
                //    $('header').css('flex-grow',0)
                $('.swiper-container').css('flex-grow', 0)
                $('header').css('display', 'flex')
                $('.col-blank').css('display', 'none')
                $('.horizontal-tip-container').css('display', 'block')
            }
        })
        // 第一次打开网页手动判断
        $(window).resize();

        // 点击退出按钮
        /* $('.sign-out-container').click(function () {
            return;
            if (!ridingFlag) {
                //    没人骑车
            }
            let index = $('.sign-out-container').index(this);
            $('.riding-tips-container').eq(index).css('display', 'none')
        }) */
        // 点击遮罩层取消按钮
        $('.cancel-img').click(function () {
            $('.mask-container').css('display', 'none')
            $('.quit-mask-container').css('display', 'none')
        })

        // 点击遮罩层确定
        function confirm_change(i) {
            // console.log(i,'confirm');
            activeView = i;
            $('.riding-tips-container').css('display', 'none');
            $('.riding-tips-container').eq(i).css('display', 'flex');
            if (i === 0) {
                ajaxReq(20)
            } else if (i === 1) {
                ajaxReq(21)
            }
        }
        // 具体点击确定事件
        $('.confirm-img').click(() => {
            confirm_change(confirm_index)
            $('.mask-container').css('display', 'none')
        })
        // $('.confirm-img').click(function () {
        // })
        // 确定退出当前的场景
        $('.confirm-quit-img').click(() => {
            ridingFlag = false;
            $('.quit-mask-container').css('display', 'none')
            $('.riding-tips-container').css('display', 'none')
            ajaxReq(100);
        })
        $('.testBtn').click(() => {
            // console.log(sid);
            return;
            $.ajax({
                type: 'GET',
                // contentType:'application/json;charset=UTF-8',
                url: 'http://106.55.254.244:9080',
                data: { sid, mas: 21 },
                dataType: 'jsonp',
                // data:JSON.stringify({
                //    sid,
                //    msg:'21'
                // }),
                success(res) {
                    console.log(res);
                },
                error(err) {
                    console.log(err);
                }
            })
        })
        // 进入场景请求
        function ajaxReq(msg) {
            console.log(msg);
            // return;
            $.ajax({
                type: 'POST',
                url: '/appuser/msg/push',
                data: {
                    id: sid,
                    msg
                },
                success: function (data) {
                    console.log(data, '  success');

                },
                error: data => {
                    console.log(data);
                }
            });
        }
        var ridingFlag = false;
        // 进入场景
        $('.swiper-slide-content').click(function () {
            // 要切换的下标
            var index = $(this).index();
            console.log(index, activeView);
            if (index === activeView) return;
            if (!ridingFlag) {
                // 无人骑车
                // var index = $(this).index();
                activeView = index;
                ridingFlag = true;
                $('.riding-tips-container').css('display', 'none');
                $('.riding-tips-container').eq(index).css('display', 'flex');
                // return;
                // console.log(179);
                if (index === 0) {
                    ajaxReq(20)
                } else if (index === 1) {
                    ajaxReq(21)
                }
            } else {
                // 正在骑车
                // var index = $(this).index();
                // console.log(index);
                confirm_index = index;
                $('.mask-container').css('display', 'flex')
            }
        })
        // 退出场景
        $('.sign_out_btn').click(function (e) {
            e.stopPropagation();
            // console.log(256);
            $('riding-tips-container').css('display', 'none')
            // 对话框
            $('.quit-mask-container').css('display', 'flex')
        })

    })()


</script>

</html>
